<template>
  <div class="page-container">
    <div class="img-box">
      <img class="global-slide-up-animation img" src="@/assets/images/error-page/404.svg" draggable="false" />
    </div>
    <div class="subject-box">
      <div class="global-slide-up-animation title" style="animation-delay: 0.1s">抱歉!</div>
      <div class="global-slide-up-animation subtitle" style="animation-delay: 0.2s">当前页面不存在...</div>
      <div class="explain global-slide-up-animation" style="animation-delay: 0.3s">请检查您输入的网址是否正确,或点击下面的按钮返回首页。</div>
      <router-link #default="{ navigate }" custom :to="{ path: appStore.homeRoute }">
        <a class="butt global-slide-up-animation" style="animation-delay: 0.4s" @click="$throttle(navigate)">
          <span style="margin-right: 6px">{{ jumpTime }}s</span>
          <span>返回首页</span>
        </a>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
  const tabsStore = useTabsStore();
  const route = useRoute();
  const appStore = useAppStore();
  const router = useRouter();
  let timer: NodeJS.Timeout | undefined = undefined;
  const jumpTime = shallowRef(5);
  onMounted(() => {
    timer = setInterval(() => {
      if (jumpTime.value) {
        jumpTime.value--;
      } else {
        timer && clearInterval(timer);
        timer = undefined;
        router.push(appStore.homeRoute);
      }
    }, 1000);
  });
  onBeforeRouteLeave(() => {
    tabsStore.delTabsByPath(route.fullPath);
    timer && clearInterval(timer);
    return true;
  });
</script>

<style lang="scss" scoped src="../err-page.scss"></style>
@/pinia/modules/tabs
